<template>
	<el-card>
		<div class="scheduleDetailBox" style="height: 100%" v-loading="boxLoading">
			<div class="scheduleDetailTopBox">
				<div style="height: 100%; width: 100%" id="scheduleDetailContainer"></div>
			</div>
		</div>
	</el-card>

	<!-- 下载流程图 -->
	<div id="snapshotDownloadId" v-show="false"></div>

	<!-- 节点框 -->
	<el-drawer size="45%" v-model="nodeVisable" direction="rtl" :append-to-body="true">
		<template #header>
			<h4>{{ nodeDataForm.properties.name }}</h4>
		</template>
		<template #default>
			<el-descriptions title="" :column="1" size="large" border>
				<el-descriptions-item label="名称">{{ nodeDataForm.properties.name }}</el-descriptions-item>
				<el-descriptions-item label="作业类型">{{ nodeDataForm.properties.taskTypeVal }}</el-descriptions-item>
				<el-descriptions-item label="权重">{{ nodeDataForm.properties.weight }}</el-descriptions-item>
				<el-descriptions-item label="遇错是否继续">{{ nodeDataForm.properties.failGoOn ? '是' : '否' }}</el-descriptions-item>
				<el-descriptions-item label="备注">{{ nodeDataForm.properties.note }}</el-descriptions-item>
			</el-descriptions>
		</template>
	</el-drawer>

	<!-- 调度任务保存 -->
	<el-dialog v-model="configVisible" title="调度配置">
		<el-descriptions title="" :column="1" size="large" border>
			<el-descriptions-item label="调度名称">{{ scheduleForm.name }}</el-descriptions-item>
			<el-descriptions-item label="周期执行">{{ scheduleForm.ifCycle ? '是' : '否' }}</el-descriptions-item>
			<el-descriptions-item label="cron表达式" v-if="scheduleForm.ifCycle">{{ scheduleForm.cron }}</el-descriptions-item>
			<el-descriptions-item label="备注">{{ scheduleForm.note }}</el-descriptions-item>
		</el-descriptions>
	</el-dialog>
</template>

<script setup lang="ts" name="Data-developmentScheduleFlow">
import { reactive, ref, onMounted, nextTick, watch } from 'vue'
import LogicFlow from '@logicflow/core'
import { Menu, Control, SelectionSelect, DndPanel, Snapshot } from '@logicflow/extension'
import '@logicflow/core/dist/style/index.css'
import '@logicflow/extension/lib/style/index.css'
import TaskModel from '../schedule/UserTaskNode.js'
import FlowLink from '../schedule/FlowLink.js'
import reset from '../../../assets/hmm/10.png'
import { useScheduleApi } from '@/api/data-development/schedule'
import TaskHistory from '../task-history/index.vue'
const props = defineProps(['childProp'])

//cron表达式，流程配置
const configVisible = ref(false)

const graphData = {
	nodes: [],
	edges: []
}

const scheduleForm = reactive({
	id: '',
	recordId: '',
	name: '',
	ifCycle: '',
	cron: '',
	note: '',
	nodes: [],
	edges: [],
	groupId: null,
	tableId: ''
})
watch(props, newValue => {
	scheduleForm.groupId = newValue.childProp
})
const boxLoading = ref(true)
const init = id => {
	scheduleForm.tableId = id
	useScheduleApi(id).then(res => {
		Object.assign(scheduleForm, res.data)
		graphData.nodes = scheduleForm.nodes
		graphData.edges = scheduleForm.edges
		//渲染
		lf.render(graphData)
		boxLoading.value = false
	})
}

//节点编辑框
const nodeVisable = ref(false)

const nodeDataForm = reactive({
	id: '',
	log: '',
	startTime: '',
	endTime: '',
	properties: {
		id: '',
		nodeRecordId: '',
		name: '',
		taskType: '',
		taskTypeVal: '',
		taskId: '',
		note: '',
		failGoOn: '',
		weight: 1,
		runStatus: ''
	},
	type: '',
	x: 490,
	y: 230
})

let lf = null
onMounted(() => {
	nextTick(() => {
		//加载流程引擎
		lf = new LogicFlow({
			container: document.querySelector('#scheduleDetailContainer'),
			grid: {
				visible: true,
				type: 'mesh',
				size: 10,
				config: {
					color: '#eeeeee'
				}
			},
			//只看不编辑
			//isSilentMode: true,
			// 注册组件
			plugins: [Menu, Control, SelectionSelect, DndPanel, Snapshot]
		})
		//注册任务节点
		lf.register(TaskModel)
		//注册连线
		lf.register(FlowLink)
		lf.setDefaultEdgeType('flow-link')
		document.getElementById('snapshotDownloadId').addEventListener('click', () => {
			lf.getSnapshot()
		})
		//左侧面板
		lf.extension.dndPanel.setPatternItems([
			{
				label: '配置信息',
				className: 'dnd-class',
				icon: '',
				callback: () => {
					configVisible.value = true
				}
			},
			{
				label: '导出',
				className: 'dnd-class',
				icon: '',
				callback: () => {
					document.getElementById('snapshotDownloadId').dispatchEvent(new MouseEvent('click'))
				}
			},
			{
				label: '重置画布',
				className: 'dnd-class',
				icon: reset,
				callback: () => {
					initThree(scheduleForm.tableId)
				}
			}
		])

		lf.setTheme({
			/* rect: {
			    fill: '#fffae1',
			    stroke: '#000000',
			    strokeWidth: 2,
			  }, */
			snapline: {
				stroke: '#ace2ff', // 对齐线颜色
				strokeWidth: 1 // 对齐线宽度
			}
		})
		//设置右键菜单
		lf.extension.menu.setMenuConfig({
			nodeMenu: [
				{
					text: '查看',
					callback(node) {
						nodeEdit(node)
					}
				}
			], // 覆盖默认的节点右键菜单
			edgeMenu: false, // 删除默认的边右键菜单
			graphMenu: [] // 覆盖默认的边右键菜单，与false表现一样
		})
		//渲染
		//lf.render(graphData)
	})
})

const initThree = id => {
	useScheduleApi(id).then(res => {
		Object.assign(scheduleForm, res.data)
		graphData.nodes = scheduleForm.nodes
		graphData.edges = scheduleForm.edges
		//渲染
		lf.render(graphData)
		boxLoading.value = false
	})
	//加载流程引擎
	lf = new LogicFlow({
		container: document.querySelector('#scheduleDetailContainer'),
		grid: {
			visible: true,
			type: 'mesh',
			size: 10,
			config: {
				color: '#eeeeee'
			}
		},
		//只看不编辑
		//isSilentMode: true,
		// 注册组件
		plugins: [Menu, Control, SelectionSelect, DndPanel, Snapshot]
	})
	//注册任务节点
	lf.register(TaskModel)
	//注册连线
	lf.register(FlowLink)
	lf.setDefaultEdgeType('flow-link')
	document.getElementById('snapshotDownloadId').addEventListener('click', () => {
		lf.getSnapshot()
	})
	//左侧面板
	lf.extension.dndPanel.setPatternItems([
		{
			label: '配置信息',
			className: 'dnd-class',
			icon: '',
			callback: () => {
				configVisible.value = true
			}
		},
		{
			label: '导出',
			className: 'dnd-class',
			icon: '',
			callback: () => {
				document.getElementById('snapshotDownloadId').dispatchEvent(new MouseEvent('click'))
			}
		},
		{
			label: '重置画布',
			className: 'dnd-class',
			icon: reset,
			callback: () => {
				initThree(scheduleForm.tableId)
			}
		}
	])

	lf.setTheme({
		/* rect: {
			    fill: '#fffae1',
			    stroke: '#000000',
			    strokeWidth: 2,
			  }, */
		snapline: {
			stroke: '#ace2ff', // 对齐线颜色
			strokeWidth: 1 // 对齐线宽度
		}
	})
	//设置右键菜单
	lf.extension.menu.setMenuConfig({
		nodeMenu: [
			{
				text: '查看',
				callback(node) {
					nodeEdit(node)
				}
			}
		], // 覆盖默认的节点右键菜单
		edgeMenu: false, // 删除默认的边右键菜单
		graphMenu: [] // 覆盖默认的边右键菜单，与false表现一样
	})
}
/**
 * 编辑节点
 */
const nodeEdit = (data: any) => {
	nodeVisable.value = true
	Object.assign(nodeDataForm, data)
}

defineExpose({
	init
})
</script>

<style>
#scheduleDetailContainer {
	height: 100%;
	width: 100%;
	/* height: calc(100vh - 200px); */
}
.dnd-class {
	padding: 7px;
}
/* 主矿体 */
.scheduleDetailTopBox {
	height: 100%;
}
</style>